<template>
  <div class="allDiv">
    <!-- 直角坐标系 -->
    <div id="myCharts" style="width: 800px; height: 600px;"></div>
    <!-- 饼图 -->
    <div id="myCharts1" style="width: 800px; height: 600px;"></div>
    <!-- 地图 -->
    <div id="myCharts2" style="width: 800px; height: 600px;"></div>
    <!-- 雷达图 -->
    <div id="myCharts3" style="width: 800px; height: 600px;"></div>
    <!-- 仪表盘 -->
    <div id="myCharts4" style="width: 800px; height: 600px;"></div>
    <!-- 高级功能 -->
    <div id="myCharts5" style="width: 100%; height: 600px; border: 1px solid red"></div>
    <div id="myCharts6" style="width: 100%; height: 600px; border: 1px solid red"></div>
  </div>
</template>

<script>
import china from '@/assets/china'
import '../../assets/zhm'
export default {
  data () {
    return {
      chinaData: china
    }
  },
  mounted () {
    console.log(this.chinaData)
    this.useEcharts()
    this.userEcharts1()
    this.userEcharts2()
    this.userEcharts3()
    this.userEcharts4()
    this.userEcharts5()
    // 调色盘 1.主题调色盘 再主题中设置  2.全局调色盘 color
  },
  methods: {
    // 直角坐标系
    useEcharts () {
      //  init 第二个参数 主题 '' 'light' 'dark' 
      //  自定义主题 官网自定义好 下载js 然后引入
      const myCharts = this.$echarts.init(document.getElementById('myCharts'), 'zhm')
      const xDataArr = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      const yDataArr1 = [220, 230, 150, 90, 20, 110, 50]
      const yDataArr3 = [222, 238, 200, 80, 70, 10, 130]
      const yDataArr2 = [10, 20, 10, 8, 7, 11, 13]
      // 柱状图多种效果
      const option = {
        title: {
          text: 'Echarts 柱状图',
          textStyle: {
            color: '#999',
            fontStyle: 'oblique'
          }
        },
        // 提示框
        tooltip: {
          trigger: 'axis',
          triggerOn: 'click',
          // 字符串模板
          formatter: '{b}的值为{c}'
          // formatter: arg => {
          //   console.log(arg)
          // }
        },
        xAxis: {
          type: 'category',
          data: xDataArr
          // 紧挨边缘 折线
          // boundaryGap: false
        },
        yAxis: {
          type: 'value',
          // 缩放 脱离 0 值比例 折线
          scale: true
        },
        // 状态栏
        toolbox: {
          feature: {
            // 下载图片
            saveAsImage: {},
            // 数据视图
            dataView: {},
            // 重置
            restore: {},
            // 区域缩放
            dataZoom: {},
            // 切换图表
            magicType: {
              type: ['line', 'bar', 'pie']
            }
            // brush: {}
          }
        },
        // 用于筛选系列，和series中的data组合使用
        legend: {
          data: ['日期大', '日期小']
        },
        series: [
          {
            name: '日期大',
            data: yDataArr1,
            type: 'bar',
            // 显示数据
            label: {
              show: true,
              position: 'top'
            },
            // 最大值最小值
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            // 平均值
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ]
            }
          },
          {
            name: '日期小',
            data: yDataArr2,
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            // 最大值最小值
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            // 平均值
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ]
            }
          }
        ]
      }
      // 折线图多种效果
      const option1 = {
        title: {
          text: 'Echarts 折线图',
          textStyle: {
            color: '#999'
          }
        },
        // 提示框
        tooltip: {
        },
        xAxis: {
          type: 'category',
          data: xDataArr,
          // 紧挨边缘 折线
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          // 缩放 脱离 0 值比例 折线
          scale: true
        },
        // 用于筛选系列，和series中的data组合使用
        legend: {
          data: ['日期大', '日期小']
        },
        series: [
          {
            name: '日期大',
            type: 'line',
            data: yDataArr1,
            // 最大值最小值
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            // 平均值
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ]
            },
            // 标注区间
            // markArea: {
            //   data: [
            //     [
            //       {
            //         xAxis: 'Mon'
            //       },
            //       {
            //         xAxis: 'Tue'
            //       }
            //     ],
            //     [
            //       {
            //         yAxis: 2000
            //       },
            //       {
            //         yAxis: 150
            //       }
            //     ]
            //   ]
            // },
            // 线条控制
            smooth: true,
            lineStyle: {
              color: 'green',
              type: 'dashed'
            },
            // 堆叠图 设置相同的 stacK
            stack: 'all',
            // 填充设置
            areaStyle: {}
          },
          {
            name: '日期小',
            type: 'line',
            data: yDataArr3,
            stack: 'all',
            areaStyle: {}
          }
        ]
      }
      // grid
      // 柱状图多种效果
      const option2 = {
        // 区域缩放
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: 0
            // type: inside 鼠标滑轮
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            // type: inside 鼠标滑轮
            // 开始缩放位置
            start: 0,
            // 结束缩放位置
            end: 80
          }
        ],
        // grid 控制直角坐标系的布局和大小 x y 就是在grid的基础上进行绘制的
        grid: {
          show: true,
          borderWidth: 10,
          borderColor: 'skyblue'
          // 边框大小 -- 图标大小
          // width: 300,
          // height: 300,
          // left: 200,
          // top: 200
        },
        title: {
          text: 'Echarts grid',
          textStyle: {
            color: '#999',
            fontStyle: 'oblique'
          }
        },
        xAxis: {
          // 类目轴 和 data 一起使用
          type: 'category',
          data: xDataArr,
          // 位置 top bottom
          position: 'bottom'
        },
        yAxis: {
          // 数值轴 自动获取series data 数据
          type: 'value',
          // 位置 left right
          position: 'left'
        },
        series: [
          {
            name: '日期大',
            data: yDataArr1,
            type: 'bar',
            // 显示数据
            label: {
              show: true,
              position: 'top'
            },
            // 最大值最小值
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            // 平均值
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值'
                }
              ]
            }
          }
        ]
      }
      myCharts.setOption(option2)
      console.log(option)
      console.log(option1)
    },
    // 饼图
    userEcharts1 () {
      const myCharts = this.$echarts.init(document.getElementById('myCharts1'), 'zhm')
      // 设置给饼图的数据 [{ name: '', value: '' }]
      const pieData = [
        { name: '淘宝', value: 11231 },
        { name: '京东', value: 22673 },
        { name: '唯品会', value: 6123 },
        { name: '1号店', value: 8989 },
        { name: '聚美优品', value: 6512 }
      ]
      const option = {
        color: [], // 全局调色盘
        title: { text: 'Echarts 饼图' },
        series: [
          {
            type: 'pie',
            data: pieData,
            color: [], // 局部调色盘
            label: {
              show: true,
              // formatter 决定文字显示内容
              formatter: arg => {
                return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
              }
            },
            // radius: 20 // 饼图的半径
            // radius: '50%' // 百分比参照的是宽度和高度较小的那一部分的一半来进行百分比设置的
            // 圆环
            // radius: ['50%', '75%'], // 第0个值代表内圆的半径 第1个值代表外圆的半径
            // 南丁格尔图 饼图的每个区域不同
            roseType: 'area',
            // 选中的效果 能够将选区域偏移圆心一小段距离
            // selectedMode: 'single' // 回到圆心
            selectedMode: 'multiple', // 不回到圆心
            // 选中的偏移量
            selectedOffset: 30
          }
        ]
      }
      myCharts.setOption(option)
    },
    // 地图
    userEcharts2 () {
      var airData = [
        { name: '北京', value: 39.92 },
        { name: '天津', value: 39.13 },
        { name: '上海', value: 31.22 },
        { name: '重庆', value: 66 },
        { name: '河北', value: 147 },
        { name: '河南', value: 113 },
        { name: '云南', value: 25.04 },
        { name: '辽宁', value: 50 },
        { name: '黑龙江', value: 114 },
        { name: '湖南', value: 175 },
        { name: '安徽', value: 117 },
        { name: '山东', value: 92 },
        { name: '新疆', value: 84 },
        { name: '江苏', value: 67 },
        { name: '浙江', value: 84 },
        { name: '江西', value: 96 },
        { name: '湖北', value: 273 },
        { name: '广西', value: 59 },
        { name: '甘肃', value: 99 },
        { name: '山西', value: 39 },
        { name: '内蒙古', value: 58 },
        { name: '陕西', value: 61 },
        { name: '吉林', value: 51 },
        { name: '福建', value: 29 },
        { name: '贵州', value: 71 },
        { name: '广东', value: 38 },
        { name: '青海', value: 57 },
        { name: '西藏', value: 24 },
        { name: '四川', value: 58 },
        { name: '宁夏', value: 52 },
        { name: '海南', value: 54 },
        { name: '台湾', value: 88 },
        { name: '香港', value: 66 },
        { name: '澳门', value: 77 },
        { name: '南海诸岛', value: 55 }
      ]
      var scatterData = [
      {
        value: [117.283042, 31.86119]
      }
    ]
      const myCharts = this.$echarts.init(document.getElementById('myCharts2'))
      this.$echarts.registerMap('chinaMap', this.chinaData)
      const option = {
        geo: {
          type: 'map',
          map: 'chinaMap',
          roam: true, // 允许拖动缩放
          label: {
            show: true
          },
          zoom: 1, // 初始缩放比例
          // center: [87, 43] // 中心点 经纬度  
        },
        // 联合空气质量
        series: [
          {
            data: airData,
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          },
          {
            data: scatterData, // 配置散点的坐标数据
            type: 'effectScatter',
            coordinateSystem: 'geo', // 指明散点使用的坐标系统  geo的坐标系统
            rippleEffect: {
              scale: 10 // 设置涟漪动画的缩放比例
            }
          }
        ],
        visualMap: {
          min: 0,
          max: 300,
          inRange: {
            color: ['white', 'green']
          },
          calculable: true  // 出现滑块
        }
      }
      myCharts.setOption(option)
    },
    // 雷达图
    userEcharts3 () {
      var dataMax = [
        {
          name: '易用性',
          max: 100
        },
        {
          name: '功能',
          max: 100
        },
        {
          name: '拍照',
          max: 100
        },
        {
          name: '跑分',
          max: 100
        },
        {
          name: '续航',
          max: 100
        }
      ]
      const radarData = [
        {
          name: '华为手机1',
          value: [80, 90, 80, 82, 90]
        },
        {
          name: '中兴手机1',
          value: [70, 82, 75, 70, 78]
        }
      ]
      const myCharts = this.$echarts.init(document.getElementById('myCharts3'))
      const option = {
        radar: {
          indicator: dataMax,
          shape: 'polygon' // 配置雷达图最外层的图形 circle polygon
        },
        series: [
          {
            type: 'radar',
            data: radarData,
            label: {
              show: true
            },
            areaStyle: {}
          }
        ]
      }
      myCharts.setOption(option)
    },
    // 仪表盘
    userEcharts4 () {
      const myCharts = this.$echarts.init(document.getElementById('myCharts4'), 'zhm')
      const option = {
        series: [
          {
            type: 'gauge',
            data: [
              { value: 97, itemStyle: { color: 'red' } }, // 每一个对象代表一个指针
              { value: 85, itemStyle: { color: 'green' } }, // 每一个对象代表一个指针
            ],
            min: 50 // min max 控制范围
          }
        ]
      }
      myCharts.setOption(option)
    },
    // 高级功能
    userEcharts5 () {
      var myChart = this.$echarts.init(document.getElementById('myCharts5'), 'zhm')
      var myChart2 = this.$echarts.init(document.getElementById('myCharts6'), 'zhm')
      myChart.showLoading()
      setTimeout(() => {
        myChart.hideLoading()
        var option = {
          animation: true, // 控制动画开启
          animationDuration: function (arg) {
            // arg 有动画的元素的下标
            return 1000 * arg
          }, // 动画时长
          animationEasing: 'bounceOut', // 缓动动画 
          animationThreshold: 4, // 动画元素的阈值 动画元素超过了这个阈值就不会显示动画
          color: [], // 全局颜色
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          toolbox: {
            feature: {
              // 下载图片
              saveAsImage: {},
            }
           },
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20],
              itemStyle: {
                // color: {
                //   type: 'linear', // 线性渐变
                //   x: 0,
                //   y: 0,
                //   x2: 0,
                //   y2: 1,
                //   colorStops:[
                //     { offset: 0, color: 'pink' }, // 0% 处的颜色
                //     { offset: 1, color: 'blue' } // 100% 处的颜色
                //   ]
                // }
                // color: {
                //   type: 'radial', // 径向渐变
                //   x: 0.5,
                //   y: 0.5,
                //   r: 10,
                //   colorStops:[
                //     { offset: 0, color: 'pink' }, // 0% 处的颜色
                //     { offset: 1, color: 'blue' } // 100% 处的颜色
                //   ]
                // },
                // 高亮
                emphasis: {
                  itemStyle: {
                    color: 'yellow'
                  }
                }
              }
            }
          ]
        }
        const pieData = [
        { name: '淘宝', value: 11231 },
        { name: '京东', value: 22673 },
        { name: '唯品会', value: 6123 },
        { name: '1号店', value: 8989 },
        { name: '聚美优品', value: 6512 }
        ]
        const option2 = {
          color: [], // 全局调色盘
          title: { text: 'Echarts 饼图' },
          series: [
            {
              type: 'pie',
              data: pieData,
              color: [], // 局部调色盘
              label: {
                show: true,
                // formatter 决定文字显示内容
                formatter: arg => {
                  return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
                }
              },
              // radius: 20 // 饼图的半径
              // radius: '50%' // 百分比参照的是宽度和高度较小的那一部分的一半来进行百分比设置的
              // 圆环
              // radius: ['50%', '75%'], // 第0个值代表内圆的半径 第1个值代表外圆的半径
              // 南丁格尔图 饼图的每个区域不同
              roseType: 'area',
              // 选中的效果 能够将选区域偏移圆心一小段距离
              // selectedMode: 'single' // 回到圆心
              selectedMode: 'multiple', // 不回到圆心
              // 选中的偏移量
              selectedOffset: 30
            }
          ]
        }
        myChart.setOption(option)
        myChart2.setOption(option2)
        // 自设应
        window.onresize = myChart.resize
        // 图表联动 保存图片自动拼接 刷新按钮 重置按钮 提示框联动，图例选择，数据范围修改等
        this.$echarts.connect([myChart, myChart2])
      }, 100)
    }
  }
}
</script>

<style>
.allDiv {
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
  align-items: center;
}
</style>
